<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片库 - 带子目录浏览</title>
    <style>
        .gallery-container {
            margin: 20px;
        }

        .directory-nav {
            margin-bottom: 20px;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 5px;
        }

        .directory-nav a {
            margin-right: 10px;
            text-decoration: none;
            color: #007bff;
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            grid-gap: 20px;
        }

        .thumbnail-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 10px;
            text-align: center;
        }

        .thumbnail-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 3px;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }

        .pagination button {
            padding: 8px 15px;
            border: none;
            background: #007bff;
            color: white;
            border-radius: 4px;
            cursor: pointer;
        }

        .pagination button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>

<body>
    <h1>图片库</h1>

    <div class="directory-nav">
        <a href="#" id="root-link">根目录</a>
        <!-- 子目录导航会通过JS动态添加 -->
    </div>

    <div id="gallery" class="gallery"></div>

    <div class="pagination">
        <button id="prev-page" disabled>上一页</button>
        <span id="page-info"></span>
        <button id="next-page">下一页</button>
    </div>

    <script>
        let currentDir = '';
        let currentPage = 1;
        const limit = 36;
        let totalPages = 0;
        let subDirectories = [];

        // 加载图片数据
        async function loadImages() {
            try {
                const response = await fetch(`/images/list?dir=${encodeURIComponent(currentDir)}&page=${currentPage}&limit=${limit}`);
                const data = await response.json();

                // 更新分页信息
                currentPage = data.page;
                totalPages = data.totalPages;
                subDirectories = data.subDirectories || [];

                document.getElementById('page-info').textContent = `第 ${currentPage} 页，共 ${totalPages} 页`;
                document.getElementById('gallery').innerHTML = '';

                // 渲染图片
                data.images.forEach(image => {
                    const card = document.createElement('div');
                    card.className = 'thumbnail-card';

                    const img = document.createElement('img');
                    img.src = image.thumbnail;
                    img.classList.add('thumbnail');
                    img.addEventListener('click', () => {
                        window.open(image.original, '_blank');
                    });
                    card.appendChild(img);

                    document.getElementById('gallery').appendChild(card);
                });

                // 更新导航和按钮状态
                updateNavigation();
                document.getElementById('prev-page').disabled = currentPage === 1;
                document.getElementById('next-page').disabled = currentPage === totalPages;
            } catch (err) {
                console.error('加载图片失败:', err);
            }
        }

        // 更新目录导航
        function updateNavigation() {
            const navElement = document.querySelector('.directory-nav');
            // 保留根目录链接
            navElement.innerHTML = '';
            navElement.appendChild(getDirLink('根目录', ''));
            // 添加当前路径的子目录导航
            if (currentDir) {
                const pathParts = currentDir.split('/').filter(part => part);
                let currentPath = '';

                pathParts.forEach((part, index) => {
                    currentPath = pathParts.slice(0, index + 1).join('/');
                    let dirName = part;
                    // 如果不是最后一级目录，添加点击事件
                    if (index >= pathParts.length - 1) {
                        dirName = `/${dirName} (当前)`;
                    }
                    navElement.appendChild(getDirLink(dirName, currentPath));
                });
            }
            if (subDirectories.length > 0) {
                var navSubDirectories = document.createElement('div');
                subDirectories.forEach(dir => {
                    navSubDirectories.appendChild(getDirLink(dir.name, `${currentDir}/${dir.path}`));
                })
                navElement.appendChild(navSubDirectories);
            }
        }

        function getDirLink(dirName, dirPath) {
            const a = document.createElement('a');
            a.href = '#';
            a.textContent = dirName;
            a.style.marginLeft = '5px';
            a.style.marginRight = '5px';
            a.addEventListener('click', (e) => {
                e.preventDefault();
                currentDir = dirPath;
                loadImages();
            });
            return a;
        }

        // 事件监听
        document.getElementById('prev-page').addEventListener('click', () => {
            if (currentPage > 1) {
                currentPage--;
                loadImages();
            }
        });

        document.getElementById('next-page').addEventListener('click', () => {
            if (currentPage < totalPages) {
                currentPage++;
                loadImages();
            }
        });

        // 初始加载根目录
        loadImages();
    </script>
</body>

</html>